<template>
  <div>
    <!-- 路由传值
         query
            js:
               传：this.$router.push('/xxx?参数名=值')
                   this.$router.push({
                     path:'/xxx',
                     query:{
                      参数名:值
                     }
                   })
                   this.$router.push({
                    name:'xxx',
                    query:{
                      参数名:值
                    }
                   })
                收：this.$route.query.参数名
            html
               <router-link to="/xxx?参数名=值">Home</router-link>
               <router-link :to="{
                path:'/xxx',
                query:{
                  参数名:值
                }
               }">Home</router-link>
         params
            js
              传：(缺点：刷新数据就没有了，优点：它的数据通过内存传递，可用于传递大量数据)
                this.$router.push({
                  name:'xxx',
                  params:{
                    参数名:值
                  }
                })
              收：this.$route.params.参数名

          动态路由匹配
             1：配制路由
                {
                  path:'/xxx/:参数名?'  // ?可传可不传
                }
             2：传：
                this.$router.push('/xxx/111')
                this.$router.push({
                  name:'xxx',
                  params:{
                    参数名:111
                  }
                })
             3:收
                this.$route.params.参数名

     -->
    <router-link
      :to="{
        path: '/home',
        query: {
          id: 123
        }
      }"
      >Home</router-link
    >
    <button @click="btnClick">跳转到home页</button>
    <button @click="goAbout">跳转 {{ id }}</button>

    <button @click="btnClick2">动态路由匹配跳转到home页</button>
  </div>
</template>
<script>
export default {
  data () {
    return {
      id: JSON.parse(sessionStorage.getItem('id')) || []
    }
  },
  methods: {
    btnClick () {
      this.$router.push({
        name: 'home',
        params: {
          id: [1, 2, 3, 4, 5, 6]
        }
      })
      sessionStorage.setItem('id', JSON.stringify([1, 2, 3, 4, 5, 6]))
    },
    btnClick2 () {
      // this.$router.push('/home/111')
      this.$router.push({
        name: 'home',
        params: {
          xxx: 111
        }
      })
    },
    goAbout () {
      window.open('http://localhost:8080/#/about', '_block')
    }
  }
}
</script>
<style></style>
